<template>
  <a-modal
    title="修改配方明细"
    :visible="show"
    :confirm-loading="loading"
    @ok="handleOk"
    @cancel="handleCancel"
    :maskClosable="false"
    width="30%"
    class="procedure-modal"
  >
    <div class="title">
      <a-form-model
        :label-col="{ span: 6 }"
        :wrapper-col="{ span: 14 }"
        :model="form"
        :rules="formRules"
        ref="form"
      >
        <a-form-model-item label="物料编码">
          <a-input v-model="form.MaterialCode" disabled />
        </a-form-model-item>
        <a-form-model-item label="物料名称">
          <a-input v-model="form.MaterialName" disabled />
        </a-form-model-item>
        <a-form-model-item label="使用数量" required prop="Quantity">
          <a-input v-model="form.Quantity" />
        </a-form-model-item>
        <a-form-model-item label="BOM比例">
          <a-input v-model="form.OrigQuantity" disabled />
        </a-form-model-item>
      </a-form-model>
    </div>
  </a-modal>
</template>

<script>
import { updateERecipeDetail } from "@/api/formula/index";
export default {
  props: ["show", "edit", "form"],
  data() {
    return {
      loading: false, //弹窗loading
      origQuantity: 0,
      formRules: {
        Quantity: [
          { required: true, message: "请填写使用数量", trigger: "blur" },
        ],
      },
    };
  },
  watch: {
    // 监听 form.Quantity 的变化
    "form.Quantity": {
      handler(newValue) {
        
        if (this.form.ReferenceAmount && this.form.ReferenceAmount !== 0) {
          this.form.OrigQuantity = newValue / this.form.ReferenceAmount;
        } else {
          this.form.OrigQuantity = 0;
        }
      },
      // 初始化时也执行一次 handler
      deep: true,
      immediate: true,
    },
  },
  methods: {
    //关闭弹窗
    handleCancel() {
      this.$refs.form.clearValidate();
      this.$emit("update:show", false);
    },

    //确认添加/修改
    handleOk() {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          this.loading = true;
          try {
            await updateERecipeDetail([this.form]);
            this.$message.success("修改成功");
            this.$emit("update:show", false);
            this.$emit("edit");
          } catch (e) {
            this.$message.error(e);
          } finally {
            this.loading = false;
          }
        }
      });
    },
    //表格选择
    handleTableChange() {},
  },
};
</script>

<style lang="less" scoped></style>
